/*
 * @Description:
 * @Author: HM
 * @Email: ming@cpglobalinnovation.com
 * @Date: 2025-02-08 12:04:52
 * @LastEditTime: 2025-02-11 11:05:51
 */
/*
 * Copyright (c) 2024 YuJie Ge(Smile)
 * Licensed under the MIT License.
 */
import { useState } from "react";
import { Card, Grid, Image, Button, Tabs } from "@arco-design/web-react";
import { useTranslation } from "react-i18next";
import WalletInfo from "./WalletInfo";
// import TokenList from "./TokenList";

const TabPane = Tabs.TabPane;
const Row = Grid.Row;
const Col = Grid.Col;

const extra = null;

function Home() {
  const { t } = useTranslation();
  const [isNetworkSwitchHighlighted, setIsNetworkSwitchHighlighted] =
    useState(false);
  const [isConnectHighlighted, setIsConnectHighlighted] = useState(false);

  const closeAll = () => {
    setIsNetworkSwitchHighlighted(false);
    setIsConnectHighlighted(false);
  };

  return (
    <div className="w-full h-full">
      <Tabs type="rounded" tabPosition="top">
        <TabPane key="1" title={t("wallet")}>
          <WalletInfo />
          {/* <TokenList address="0xc5C7b559B18BE4309212171F34bcfC25EF12B876" /> */}
          {/* <Row gutter={20} className={"mb-4"}>
            <Col span={12} className={"text-xl font-bold"}>
              222
            </Col>
            <Col span={12} className={"text-xl font-bold"}>
              333
            </Col>
          </Row> */}
        </TabPane>
        <TabPane key="2" title={t("contract")}>
          <span className="text-yellow-300">222</span>
        </TabPane>
        <TabPane key="3" title={t("other")}>
          333
        </TabPane>
      </Tabs>

      {/* <Row gutter={20} className={"mb-4"}>
        <Col span={24} className={"text-xl font-bold"}>
          {t("欢迎使用 React Acro Admin 🎉")}
        </Col>
      </Row>
      <Row gutter={20} className={"mb-4"}>
        <Col span={24}>{t("种一棵树最好的时间是十年前，其次是现在。")}</Col>
      </Row> */}
      {/* <Row gutter={20} className={"mb-4"}>
        <Col span={12}>
          <Card title="特性" extra={extra} bordered={true}>
            <ul>
              <li>✨ 支持 i18n 语言国际化</li>
              <li>✨ 支持暗黑模式</li>
              <li>✨ 支持主题定制</li>
              <li>✨ 支持全屏切换</li>
              <li>✨ 路由持久化管理</li>
              <li>✨ 状态持久化</li>
              <li>✨ ...</li>
            </ul>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="技术栈" extra={extra} bordered={true}>
            <ul>
              <li>✨ 使用 Vite 构建</li>
              <li>✨ 使用 Typescript 编写</li>
              <li>✨ 使用 React 框架</li>
              <li>✨ 使用 Tailwindcss Css框架</li>
              <li>✨ 集成 React路由，扁平化路由设计</li>
              <li>✨ 集成 Zustand 状态管理，支持状态持久化</li>
              <li>
                ✨ 集成 AcroDesign 企业级组件库，智能设计体系，连接轻盈体验
              </li>
            </ul>
          </Card>
        </Col>
      </Row> */}
    </div>
  );
}

export default Home;
